<!DOCTYPE html>
<h1>Connection</h1>
<form class="ui form" id="loginForm" ng-class="{loading: connecting}" onsubmit="return false;">
    <div class="fields">
        <div class="twelve wide field">
            <label>Bittorrent Client</label>
            <dropdown class="fluid" title="Client Program" ng-model="server.client" ng-change="setPath()">
                <dropdown-group value="id" title="client.name" ng-repeat="(id, client) in btclients">
                    <i class="icon torrent big" ng-class="client.icon"></i> {{client.name}}
                </dropdown-group>
            </dropdown>
        </div>
        <div class="four wide field">
            <label>Protocol</label>
            <dropdown class="fluid" title="Client Program" ng-model="server.proto">
                <dropdown-group value="http" title="http">http</dropdown-group>
                <dropdown-group value="https" title="https">https</dropdown-group>
            </dropdown>
        </div>
    </div>
    <div class="two fields">
        <div class="field six wide">
            <label>IP Address</label>
            <div class="ui left icon input">
                <i class="world icon"></i>
                <input type="text" name="ip" ng-model="server.ip" placeholder="IP Address">
            </div>
        </div>
        <div class="field four wide">
            <label>Port</label>
            <div class="ui left icon input">
                <i class="sitemap icon"></i>
                <input type="number" name="port" ng-model="server.port" placeholder="Port">
            </div>
        </div>
        <div class="field six wide">
            <label>Path</label>
            <div class="ui left icon action input">
                <i class="linkify icon"></i>
                <input type="text" name="path" ng-model="server.path" placeholder="Path" ng-change="lockPath()">
                <button class="ui icon button" ng-click="resetPath()">
                    <i class="refresh icon"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="two fields">
        <div class="field">
            <label>Username</label>
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="username" ng-model="server.user" placeholder="Username">
            </div>
        </div>
        <div class="field">
            <label>Password</label>
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" ng-model="server.password" placeholder="Password">
            </div>
        </div>
    </div>
</form>